<template>
  <div class="arrange">
    <!-- 头部banner -->
    <hdbanner></hdbanner>
    <!-- 内容 -->
    <div class="arrange_body">
      <!-- 筛选导航 -->
      <div class="nav">
        <ul class="level_1">
          <li>
            <div class="li" @click="checkClass()">全部文章</div>
          </li>
          <li>
            <div class="li" @click="showlevel_2 = !showlevel_2">分类筛选</div>
            <ul class="level_2" v-show="showlevel_2">
              <li v-for="(item, index) in classList" :key="'classList' + index"
                @click="checkClass(item.class_id, item.classname)">{{
                  item.classname }}</li>
            </ul>
          </li>
        </ul>
      </div>
      <!-- 文章列表 -->
      <div class="article_list">
        <h3>{{ title }}
          <el-input v-show="title === '全部文章'" @clear="cleartable($event, 'clear')" clearable style="width: 250px;"
            v-model="field" size="small" placeholder="请输入标题或简介"></el-input>
          <el-button v-show="title === '全部文章'" type="primary" size="small" @click="checkClass()"
            icon="el-icon-search">搜索</el-button>
          <el-button v-show="title === '全部文章'" type="info" size="small" @click="cleartable"
            icon="el-icon-search">重置</el-button>
        </h3>
        <div class="article_item" v-for="(item, index) in articleList" @click="goArticle(item.article_id)">
          <img :src="item.imgUrl">
          <div class="list_body">
            <div class="info">
              <div class="title">{{ item.title }}</div>
              <div class="p"> {{ item.intro }} </div>
            </div>
            <div class="operation">
              <div class="date iconfont icon-shijianchuo "></div><span>{{ item.date ? $moment(item.date, 'YY-MM-DD') : ''
              }}</span>
              <div class="look iconfont icon-yanjing-"></div><span>{{ item.pageview }}</span>
              <div class="say iconfont icon-pinglun"></div><span>{{ item.commonts }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import hdbanner from "@/components/hdbanner";
import { getClass, getArticle } from "@/api";
export default {
  name: 'arrange',
  components: {
    hdbanner,
  },
  data() {
    return {
      title: '全部文章',
      showlevel_2: true,
      classList: [],
      articleList: [],
      // imgsrc: 'https://api.vvhan.com/api/view?tempid=',
      // imgsrc: 'https://api.dujin.org/pic/fengjing?tempid='
      // imgsrc: 'https://tuapi.eees.cc/api.php?category=fengjing&tempid=',
      // imgsrc: 'https://api.ixiaowai.cn/gqapi/gqapi.php?tempid=',
      // imgsrc: 'https://api.dujin.org/pic/fengjing?tempid=',
      imgsrc: 'https://api.7585.net.cn/360/api.php?id=36&tempid=',
      

      field: ''
    }
  },
  mounted() {
    this.checkClass()
    getClass({ type: 2 }).then(res => {
      this.classList = res.data.results
    })
  },
  methods: {
    checkClass(class_id, classname) {
      this.articleList = []
      if (class_id) {
        this.title = classname
        getArticle({ type: 3, class_id }).then(res => {
          res.data.results.forEach((item) => {
            item.imgUrl = this.imgsrc + Math.random()
          })
          this.articleList = res.data.results
        })
      } else {
        // 全部文章
        this.title = '全部文章'
        getArticle({ type: 2, field: this.field }).then(res => {
          res.data.results.forEach((item) => {
            item.imgUrl = this.imgsrc + Math.random()
          })
          this.articleList = res.data.results
        })
      }
    },
    // 跳转
    goArticle(id) {
      this.$router.push(`/detail/${id}`)
    },
    //重置
    cleartable() {
      this.field = ''
      this.checkClass()
    },
  }
}
</script>
<style>
@import url('@/assets/static/font/iconfont.css');
</style>
<style lang="less" src="./index.less" scoped></style>